<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           button {
        /* height: 200px;
            width: 200px; */
        position: fixed;
        left: 32%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
        overflow: hidden;
      }
    </style>
</head>
<body>
    <css-doodle>
        --color: #51eaea, #fffde1, #ff9d76, #FB3569;
        @grid: 30x1 / 100vw 100vh / #270f34; 
        :container {
          perspective: 30vmin;
          --deg: @p(-180deg, 180deg);
        }
        
        :after, :before {
          content: '哈哈哈哈哈哈';
          background: @p(--color); 
          @place: @r(100%) @r(100%);
          @size: @r(6px);
          @shape: heart;
        }
        @place: center;
        @size: 18vmin; 
      
        box-shadow: @m2(0 0 50px @p(--color));
        background: @m100(
          radial-gradient(@p(--color) 50%, transparent 0) 
          @r(-20%, 120%) @r(-20%, 100%) / 1px 1px
          no-repeat
        );
        will-change: transform, opacity;
        animation: scale-up 12s linear infinite;
        animation-delay: calc(-12s / @I * @i);
        @keyframes scale-up {
          0%, 95.01%, 100% {
            transform: translateZ(0) rotate(0);
            opacity: 0;
          }
          10% { 
            opacity: 1; 
          }
          95% {
            transform: 
              translateZ(35vmin) rotateZ(var(--deg));
          }
        }
      </css-doodle>
      <script src="https://unpkg.com/css-doodle@0.33.1/css-doodle.min.js"></script>

<script>
    const doodle = document.querySelector('css-doodle');
    // 每次点击刷新css-doodle
    doodle.onclick = function () {
        doodle.update();
    };
        doodle.grid = "5";
        console.log(doodle.grid);
        doodle.seed = 'my random seed';
        console.log(doodle.seed);
        doodle.use = 'var(--my-rule)';
        console.log(doodle.use);
</script>
</body>
</html>